<template>
	<view class="detailed" @touchmove.stop="">
		<!-- bgcolor="#FD9031" -->
		<title @titleHeight='setPaddingTop' :center="false" title="影片详情" iconSize="38" bgcolor="#fff"  color="#000000"
		 @toclick="toBack(1)"icon="/static/img/other/to-back.png"></title>
		<view class="alltop" :style="{'padding-top':height+'px'}">
			<!-- 电影头部 start -->
			<movice-top :value="detaileddata"></movice-top>
			<!-- 电影头部 end -->

			<!-- 选项卡 start -->
			<div class="tab-time-box">
				<tabs :list="listTime" name="days" height="40" inactive-color="#666" active-color="#2E2E2E" :timeTab="true"
				tabbar-color="linear-gradient(270deg, rgba(126, 50, 219, 1), rgba(255, 85, 136, 1))" :is-scroll="t" :current="timeCurrent" @change="changeTimeTab">
				</tabs>
			</div>
			<!-- 选项卡 end -->

			<!-- 下拉选项 start -->
			<view class="select-box">
				<dropdown-group :list="searchData" :height="600" :is-search="true" @change="changeType" 
				@search-change="searchCinema" layout="<"></dropdown-group>
			</view>
			<!-- 下拉选项 end -->
		</view>

		<!-- 电影列表 start -->
		<scroll-view class="detailed-movielist" :style="{height: boxHeight + 'px'}" scroll-y :refresher-triggered="freshing"
		 refresher-enabled @refresherrefresh="refresh(true)" @scrolltolower="onreachBottom">
			<view class="movielist_box" v-if="movielist.length > 0">
				<block v-for="(item,index) in movielist" :key="index">
					<!-- <view class="detailed-minlist" @click="movietiao(item)">
						<view class="detailed-red-box">
							<view v-if="item.tp==1">特惠</view>
							<text>{{item.nm}}</text>
						</view>
						<view class="minlist-botm">
							<text style="flex:1" class="no-warp-one">{{item.addr}}</text>
							<text style="margin-left: 30rpx;">{{item.distance}}km</text>
						</view>
					</view> -->
					<view class="detailed-minlist" @click="movietiao(item)">
						<view class="item1">
							<view class="name ellipsis">
								{{item.nm}}
							</view>
							<view class="price ellipsis">
								<text class="text1">￥</text>{{item.price}}<text class="text2">起</text>
							</view>
						</view>
						<view class="item2">
							<view class="addr ellipsis">
								{{item.addr}}
							</view>
							<view class="distance ellipsis">
								<image src="/static//img/other/cinemaItemDistanceIcon.png" mode="" 
								style="width: 24rpx;height: 24rpx;margin-right: 4rpx;"></image>
								{{item.distance}}km
							</view>
						</view>
						<view class="item3">
							<view class="tp tag-item" v-if="item.tp == 1">
								惠
							</view>
							<view class="qupiaoji tag-item" v-if="item.tp == 1">
								取票机
							</view>
							<view class="tags" v-if="item.hall_type">
								<view class="tag-item" v-for="i in (item.hall_type.split(','))">
									{{i}}
								</view>
							</view>
						</view>
						<!-- <view class="item4 ellipsis">
							近期场次：
							<text class="recentEvents-item" v-for="(i,index) in (item.shows.slice(0,5))">
								{{i.show_time.substring(11,16)}}
							</text>
						</view> -->
					</view>
				</block>
			</view>
			<view class="movielist_box-layout" v-if="movielist.length == 0 && init">
				<view class="item" v-for="i in 5">
					<view class="info1">
						<view class="info1-1"></view>
						<view class="info1-2"></view>
					</view>
					<view class="info2">
						<view class="info2-1"></view>
						<view class="info2-2"></view>
					</view>
					<view class="info3">
					</view>
					<view class="info4"></view>
				</view>
			</view>
			<view class="none-cinema-box" v-if="movielist.length <= 0 && loading == false && !init">
				<image src="@/static/img/other/no-img.png" mode="widthFix"></image>
				<view>无搜索结果，换家影院吧~</view>
			</view>
		</scroll-view>
		<!-- 电影列表 end -->
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import tabs from '@/pages/components/u-tabs.vue'
	import moviceTop from '@/pages/components/movice/movice-top.vue'
	import dropdownGroup from '@/pages/components/public/dropdown-group.vue'
	export default {
		data() {
			return {
				height:95,
				//总条数
				total: 0,
				//加载完成，到底了
				loaded: false,
				timeCurrent: 0,
				scrollHeight: 0,
				//下啦刷新
				freshing: false,
				loading: false,
				// 电影详情数据
				detaileddata: {},
				//类型
				type: 0,
				// 选项卡
				list: [],
				//筛选条件
				condition: {
					value1: '0',
					value2: '',
					value3: 'distance',
					page: 0,
					pagesize: 20,
					keyword: '',
				},
				//盒子高度
				boxHeight: '',
				//筛选数据
				searchData: {
					city: [], //城市
					brand: [ // 品牌
						{
							label: "品牌",
							value: ""
						}, {
							label: "万达影院",
							value: "万达"
						}, {
							label: "大地影院",
							value: "大地"
						}, {
							label: "卢米埃影院",
							value: "卢米埃"
						}, {
							label: "幸福蓝海影院",
							value: "幸福蓝海"
						}, {
							label: "横店影城",
							value: "横店"
						}, {
							label: "中影国际影城",
							value: "中影"
						}, {
							label: "金逸影城",
							value: "金逸"
						}, {
							label: "博纳影城",
							value: "博纳"
						}, {
							label: "CGV影城",
							value: "CGV"
						}, {
							label: "UME国际影城",
							value: "UME"
						}
					],
					distance: [ //距离
						{
							label: "离我最近",
							value: "distance"
						}, {
							label: "折扣最低",
							value: "discount"
						}, {
							label: "价格最低",
							value: "price"
						},
					]
				},
				// 时间表
				listTime: [],
				// 选中选项卡
				listindex: 0,
				// 选项卡left值
				leftlength: 60,
				// 电影列表数据
				movieinfo: {
					"date": '',
					"mid": '',
					"lat": '',
					"lng": '',
					"cid": '',
					"rid": '0',
					"s": '',
					"cinemaTitle": '',
					"orders": 'discount',
					"offset": 0,
					"limit": 20
				},
				// 电影列表
				movielist: [],
				time: '',
				init:true,//控制首次加载时不出现暂无的样式
				toggleCity:true,//控制是否弹出切换城市弹窗（解决多次弹出弹窗问题）
			};
		},
		components: {
			title,
			tabs,
			moviceTop,
			dropdownGroup
		},
		onLoad(option) {
			// 电影列表信息
			this.movieinfo.mid = option.mid
			
			this.getLocalCity()
		},
		onShow() {
			this.movieinfo.cid = this.$store.getters.nowLoc.id
			this.$nextTick(() => {
				this.getDom()
			})
			uni.showLoading({
				title: '加载中'
			})
			this.getRegion()
			this.getMoviceDetail()
			this.getMoviceTime()
		},
		watch:{
			'$store.getters.nowLoc':{
				deep:true,
				// immediate:true,
				handler(v){
					if(v.lat && v.lng){
						this.movieinfo.cid = this.$store.getters.nowLoc.id
						this.refresh()
					}
				}
			}
		},
		methods: {
			// 处理定位信息
			dealLocation(locaCity){
				// 当前获取的定位城市信息，可以直接重置
				// this.$store.commit('setLocCity', locaCity)
				// uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
				if(uni.getStorageSync('loc')==''){
					this.$store.commit('setLocCity', locaCity)
					uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
				}
				// let chooseloc = uni.getStorageSync('chooseloc') ? JSON.parse(uni.getStorageSync('chooseloc')) : null
				let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')))
				if(!chooseloc || chooseloc.nm == locaCity.nm){//没有选择城市或选择城市等于定位城市
					this.$store.commit('setChooseLoc', locaCity)
					uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
				}else{
						if(this.toggleCity){//避免重复弹窗
						this.toggleCity = false;
						let loc = this.$store.state.locCity || (uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')));
						// let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')));
							uni.showModal({
								title: '切换城市',
								content: `定位到您在${locaCity.nm},是否切换？`,
								success:(res) =>{
									if (res.confirm) {
										// 添加入定位城市数据
										this.$store.commit('setLocCity', locaCity)
										uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
										// 添加入选择城市数据
										this.$store.commit('setChooseLoc', locaCity)
										uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
									} else if (res.cancel) {
										// this.$store.commit('setChooseLoc',chooseloc)
										// ----不加下面的代码有bug【首页中定位不同时不选择切换城市=》在电影-影院 中无法查询出初始影院列表】。原因不明
										let loc = uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc'))
										this.$store.commit('setLocCity', loc)
										uni.setStorageSync('loc', JSON.stringify(loc))
										// --------------------------------------------------------------
									}
								},
								complete:()=>{
									this.toggleCity = true;
								}
							});
						}	
				}
				// console.log('locaCity',locaCity)
				// console.log('chooseloc',chooseloc)
			},
			//获取当前定位
			getLocalCity() {
				// this.$store.state.chooseLoc
				this.$common.getNowLocation((result) => {
					this.$api.getLocalCity({
						lat: result.latitude,
						lng: result.longitude,
					}).then(res => {
						let locaCity = {
							...res.data.data,
							lat: result.latitude,
							lng: result.longitude
						}
						
						this.dealLocation(locaCity)
					})
				}, (error) => {
					// let locaCity = {"id":-1,"nm":"定位失败","detail":"定位未开启","update_time":1614405365767,"lat":null,"lng":null}
					let chooseLoc = {
						"id": 2,
						"nm": "北京",
						"update_time": new Date().getTime() * 1000
					}
					// this.$store.commit('setLocCity', locaCity)
					this.$store.commit('setChooseLoc', chooseLoc)
					// uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
					uni.setStorageSync('chooseloc', JSON.stringify(chooseLoc))
				}, true)
			},
			// ------------------------------------------------------------------------
			setPaddingTop(data){
				// console.log('-------title的高度：',this.height,'======》',data.height,'--------');
				this.height = data.height
			},
			// 获取电影院列表
			getmovielist() {
				this.loading = true
				// let lat
				// let lng
				// if(this.$store.state.locCity){
				// 	lat = this.$store.state.locCity.lat
				// 	lng = this.$store.state.locCity.lng
				// }else{
				// 	lat = uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')).lat
				// 	lng = uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')).lng
				// }
				// console.log(this.$store.getters.nowLoc);
				uni.showLoading()
				let list = {
					...this.movieinfo,
					// lat: lat,
					// lng: lng,
					lat: this.$store.getters.nowLoc.lat,
					lng: this.$store.getters.nowLoc.lng,
					s: this.condition.keyword,
					rid: this.condition.value1,
					cinemaTitle: this.condition.value2,
					orders: this.condition.value3,
					offset: this.condition.page * this.condition.pagesize,
					limit: this.condition.pagesize
				}
				// console.log(list,this.$store.state.locCity.lat || uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')).lat);
				this.$api.getMovieCinema(list).then(res => {
					this.movielist.push(...res.data.data.list.rows)
					this.total = res.data.data.list.total
					this.freshing = false
					this.loading = false
					uni.hideLoading()
					if (this.total <= this.condition.page * this.condition.pagesize) {
						this.loaded = true
					}
					this.condition.page += 1
					
					this.init = false //首次加载完成，可以显示暂无的样式了
				})
			},
			// 影片详情
			getMoviceDetail() {
				this.$api.getMovieDetailed({
					mid: this.movieinfo.mid,
					s: 1
				}).then(res => {
					this.detaileddata = res.data.data
				})
			},
			// 获取影片时间
			getMoviceTime() {
				this.$api.getMovieCinemaDays({
					mid: this.movieinfo.mid,
					cid: this.$store.getters.nowLoc.id
				}).then(res => {
					if (res.data.data.length > 0) {
						this.listTime = res.data.data
					} else {
						this.listTime = []
						for (let i = 0; i < 3; i++) {
							this.listTime.push({
								days: this.$common.nowAfterDay(new Date(), i, 'YYYY-MM-DD')
							})
						}
					}
					// 获取电影列表
					this.movieinfo.date = this.listTime[0].days
					this.getmovielist()
				})
			},
			// 返回
			toBack(index) {
				this.$common.toBack(index)
			},
			// 改变选项卡
			changelist(row) {
				// console.log(row)
				this.listindex = row
				this.leftlength = (row) * 148 + 60
			},
			// 获取地区数据
			getRegion() {
				this.$api.getRegion({
					cid: this.$store.getters.nowLoc.id
				}).then(res => {
					this.searchData.city = res.data.data
					this.searchData.city.unshift({
						cid: this.$store.state.chooseLoc.id || this.$store.state.locCity.id,
						id: 0,
						name: "全城",
						rid: 0,
					})
					let list = JSON.stringify(this.searchData.city)
					list = list.replace(/rid/g, 'value')
					list = list.replace(/name/g, 'label')
					this.searchData.city = JSON.parse(list)
				})
			},
			// 设置盒子高度
			getDom() {
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.alltop').boundingClientRect(res => {
					let height = res[0] ? res[0].height : 0
					this.boxHeight = (this.$store.state.windowHeight - height)
				}).exec()
			},
			// 下拉刷新事件
			refresh(freshing = null) {
				if (freshing) {
					this.freshing = true
				}
				this.loaded = false
				this.condition.page = 0
				this.movielist = []
				uni.showLoading({
					title: '加载中'
				})
				this.getmovielist()
			},
			// 触底事件
			onreachBottom() {
				if (!this.loaded) {
					uni.showLoading({
						title: '加载中'
					})
					this.getmovielist()
				}
			},
			// 电影跳转
			movietiao(item) {
				uni.navigateTo({
					url: `/subpages/buymovie/buymovie?cid=${item.cid}&cinemaId=${item.cinemaid}&mid=${this.movieinfo.mid}&dates=${this.listTime[this.timeCurrent].days}`
				})
			},
			// 改变选项卡 时间tab切换
			changeTimeTab(index) {
				this.timeCurrent = index
				this.movieinfo.date = this.listTime[this.timeCurrent].days
				this.refresh()
			},
			// 搜索影院
			searchCinema(value) {
				this.condition.keyword = value
				this.$common.inputDebounce(this, () => {
					this.refresh()
				})
			},
			// 条件选择
			changeType(data) {
				this.condition = { ...this.condition,
					...data
				}
				this.refresh()
			},
		},

	}
</script>

<style lang="scss" scoped>
.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
	.no-warp-one {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.detailed {
		position: relative;
		z-index: 1;
		height: 100vh;
		overflow: hidden;

		.tab-time-box {
			margin-top: 30rpx;
			margin-left: 40rpx;
			min-height: 100rpx;
			// 新增一条线
			// border: 1rpx solid rgba(96, 96, 96, 0.15);
		}

		// 选项卡
		/deep/::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
		}

		.detailed-tab {
			display: flex;
			width: 1628rpx;
			overflow: hidden;
			box-sizing: border-box;
			white-space: nowrap;
			padding-bottom: 16rpx;

			.detailed-xuan {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 30rpx;
				padding: 0 20rpx;
				width: 148rpx;
				box-sizing: border-box;

				view {
					font-size: 26rpx;
					color: #000;
				}

				.detailed-fen {
					font-weight: bold;
					color: #f1257f;
				}

				text {
					font-size: 24rpx;
					color: #B9BBBB;
					margin-top: 8rpx;
				}
			}

			.tab-heng {
				width: 30rpx;
				height: 6rpx;
				background-color: #F1257F;
				position: absolute;
				bottom: 0rpx;
				transition: all 0.6s;
			}
		}

		// 电影列表
		.detailed-movielist {
			padding: 0 40rpx;
			border-bottom: 1rpx solid #E5E5E5;
			box-sizing: border-box;

			// .detailed-minlist {
			// 	padding: 25rpx 0;
			// 	border-bottom: 1rpx solid rgba(96,96,96,.1);

			// 	.detailed-red-box {
			// 		display: flex;
			// 		align-items: center;

			// 		text {
			// 			font-size: 28rpx;
			// 			color: #000;
			// 		}

			// 		view {
			// 			width: 60rpx;
			// 			height: 35rpx;
			// 			background-image: linear-gradient(45deg, #f43f3b, #ec008c);
			// 			font-size: 20rpx;
			// 			color: #fff;
			// 			border-radius: 8rpx;
			// 			display: flex;
			// 			justify-content: center;
			// 			align-items: center;
			// 			margin-right: 10rpx;
			// 		}
			// 	}

			// 	.minlist-botm {
			// 		margin-top: 15rpx;
			// 		display: flex;
			// 		font-size: 22rpx;
			// 		color: #BCBCBC;
			// 	}
			// }
			
			.detailed-minlist {
				padding: 25rpx 0;
				border-bottom: 1rpx solid rgba(96,96,96,.1);
				.item1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
					.name {
						font-size: 16px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
						
						max-width: 85%;
					}
					.price {
						// 最大的价格
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FF4345;
						
						max-width: 20%;
						.text1 {
							font-size: 24rpx;
							font-weight: 400;
						}
						.text2 {
							font-size: 24rpx;
							font-weight: 400;
							color: #A6A6A6;
						}
					}
				}
				.item2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
					.addr {
						max-width: 80%;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
					.distance {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						max-width: 20%;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
				.item3 {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 20rpx;
					.tag-item {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 2rpx 8rpx;
						border-radius: 8rpx;
						border: 1rpx solid #CCCCCC;
						margin-right: 12rpx;
						
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;
						
					}
					.tp {
						background: #FF4345;
						border: none;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
					.qupiaoji {
						background: rgba(66,138,247,0.12);
						border: none;
						color: #428AF7;
					}
					.tags {
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}
				}
				.item4 {
					.recentEvents-item {
						border-right: 1rpx solid #DDDDDD;
						padding: 0 8rpx;
						
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						
						&:last-child {
							border: none;
						}
					}
				}
			}
		}
	}
	
	
	.movielist_box-layout {
		display: flex;
		flex-direction: column;
		.item {
			padding: 25rpx 0;
			.info1 {
				display: flex;
				justify-content: space-between;
				margin-bottom: 8rpx;
				.info1-1 {
					width: 236rpx;
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
				.info1-2 {
					width: 104rpx;
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
			}
			.info2 {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.info2-1 {
					width: 456rpx;
					height: 34rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
				.info2-2 {
					width: 146rpx;
					height: 34rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
			}
			.info3 {
				width: 456rpx;
				height: 36rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
				margin-bottom: 8rpx;
			}
			.info4 {
				width: 456rpx;
				height: 34rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
			}
		}
	}
</style>
